<style scoped>
  @import "../css/page4.css"; /* 引入预定义变量 */
</style>


<template>
  <div id="main" class="div_main">

  <p class="title">模型训练</p>

  <div class="text2">
    <p align="center">参数设置</p>
          学习率
          <input type="text" id="learn_rate" value="0.001"></input>
          训练轮次
          <input type="text" id="unit_number" value="10"></input>
          激活函数
          <input type="text" id="activate_function" value="sigmoid"></input>
          损失函数
          <input type="text" id="loss_function" value="MAE"></input>
  </div>
    <div class="button_div">
      <div>
        <button v-on:click="go">训练数据处理</button>
      </div>

      <div>
        <button type="button" v-on:click="train">开始训练</button>
      </div>

      <div>
        <button type="button" v-on:click="go_next">保存模型</button>
      </div>
    </div>

    <div id="txt" class="cla">
    模型训练中
    </div>
    <img style="width:500px" :src="img" class="im">
    </div>

  </div>
</template>

<script>

var flag

export default{


  data(){

    return{

    img:''

    }
  },


  /*
  页面跳转方法，跳转到数据处理页面（page5）
  */
  methods:{
    go(){

      flag = 1;

      this.$router.push({path:'page2',query:{nameId:'model_train'}})
    },

    go_next(){
      this.$router.push({path:'page3'})
    },

    train(){

      if(typeof(flag) == "undefined" || flag == '' || flag == null){
        alert("请先点击训练数据处理按钮");
        return;
      }

      var rate = document.getElementById("learn_rate").value;
      var number = document.getElementById("unit_number").value;
      var activate = document.getElementById("activate_function").value;
      var loss = document.getElementById("loss_function").value;

      var data = [rate, number, activate, loss];

      document.getElementById("txt").style.visibility = "visible";

      this.$axios.post('/api/train', data)
      .then(res=>{
      this.img = 'data:;base64,' + res.data
      })
      .then(function(response){
        alert("模型训练完成");
        document.getElementById("txt").style.visibility = "hidden";
      })
    }

  }

}

</script>
